@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-grid' !default;

.#{$prefix} {
  &-row {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(#{with-prefix-var('grid-row-gap')});
    margin-left: calc(-1 * var(#{with-prefix-var('grid-row-gutter')}) / 2);
    margin-right: calc(-1 * var(#{with-prefix-var('grid-row-gutter')}) / 2);

    $justify-content: with-prefix-var('grid-row-justify') !default;

    justify-content: var($justify-content);

    & + & {
      margin-top: var(with-prefix-var('grid-row-gap'));
    }
  }

  &-col {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 1px;
    padding-left: calc(var(#{with-prefix-var('grid-row-gutter')}) / 2);
    padding-right: calc(var(#{with-prefix-var('grid-row-gutter')}) / 2);

    $span: with-prefix-var('grid-col-span') !default;
    $columns: with-prefix-var('grid-row-columns') !default;

    flex-basis: calc(var(#{$span}) / var(#{$columns}) * 100%);
    // 避免被内部溢宽撑开
    max-width: calc(var(#{$span}) / var(#{$columns}) * 100%);

    $offset: with-prefix-var('grid-col-offset') !default;

    margin-inline-start: calc(var(#{$offset}) / var(#{$columns}) * 100%);

    $order: with-prefix-var('grid-col-order') !default;

    order: var($order);

    $justify-content: with-prefix-var('grid-col-justify') !default;

    justify-content: var($justify-content);
  }
}

$hi-v4-xxs-viewport: 'only screen and (min-width: 375px)' !default;
$hi-v4-xs-viewport: 'only screen and (min-width: 480px)' !default;
$hi-v4-xs-viewport: 'only screen and (min-width: 480px)' !default;
$hi-v4-sm-viewport: 'only screen and (min-width: 576px)' !default;
$hi-v4-md-viewport: 'only screen and (min-width: 768px)' !default;
$hi-v4-lg-viewport: 'only screen and (min-width: 992px)' !default;
$hi-v4-xl-viewport: 'only screen and (min-width: 1200px)' !default;
$hi-v4-xl-viewport: 'only screen and (min-width: 1600px)' !default;

.#{$prefix}-col {
  --#{$prefix}-col-span: var(--#{$prefix}-col-span-xs);
  --#{$prefix}-col-offset: var(--#{$prefix}-col-offset-xs);
  --#{$prefix}-col-order: var(--#{$prefix}-col-order-xs);
  --#{$prefix}-col-justify: var(--#{$prefix}-col-justify-xs);
}

.#{$prefix}-row {
  --#{$prefix}-row-justify: var(--#{$prefix}-row-justify-xs);
}

@media #{$hi-v4-sm-viewport} {
  .#{$prefix}-row {
    --#{$prefix}-row-justify: var(--#{$prefix}-row-justify-sm);
  }

  .#{$prefix}-col {
    --#{$prefix}-col-span: var(--#{$prefix}-col-span-sm);
    --#{$prefix}-col-offset: var(--#{$prefix}-col-offset-sm);
    --#{$prefix}-col-order: var(--#{$prefix}-col-order-sm);
    --#{$prefix}-col-justify: var(--#{$prefix}-col-justify-sm);
  }
}

@media #{$hi-v4-md-viewport} {
  .#{$prefix}-row {
    --#{$prefix}-row-justify: var(--#{$prefix}-row-justify-md);
  }

  .#{$prefix}-col {
    --#{$prefix}-col-span: var(--#{$prefix}-col-span-md);
    --#{$prefix}-col-offset: var(--#{$prefix}-col-offset-md);
    --#{$prefix}-col-order: var(--#{$prefix}-col-order-md);
    --#{$prefix}-col-justify: var(--#{$prefix}-col-justify-md);
  }
}

@media #{$hi-v4-lg-viewport} {
  .#{$prefix}-row {
    --#{$prefix}-row-justify: var(--#{$prefix}-row-justify-lg);
  }

  .#{$prefix}-col {
    --#{$prefix}-col-span: var(--#{$prefix}-col-span-lg);
    --#{$prefix}-col-offset: var(--#{$prefix}-col-offset-lg);
    --#{$prefix}-col-order: var(--#{$prefix}-col-order-lg);
    --#{$prefix}-col-justify: var(--#{$prefix}-col-justify-lg);
  }
}

@media #{$hi-v4-xl-viewport} {
  .#{$prefix}-row {
    --#{$prefix}-row-justify: var(--#{$prefix}-row-justify-xl);
  }

  .#{$prefix}-col {
    --#{$prefix}-col-span: var(--#{$prefix}-col-span-xl);
    --#{$prefix}-col-offset: var(--#{$prefix}-col-offset-xl);
    --#{$prefix}-col-order: var(--#{$prefix}-col-order-xl);
    --#{$prefix}-col-justify: var(--#{$prefix}-col-justify-xl);
  }
}
